<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect">
    <el-submenu index="1">
      <template slot="title"><i title="图表" class="fa fa-bar-chart"></i></template>
      <el-menu-item index="1-1">通用Echarts</el-menu-item>
      <el-menu-item index="1-2">柱状图</el-menu-item>
      <el-menu-item index="1-3">折线图</el-menu-item>
      <el-menu-item index="1-4">饼图</el-menu-item>

    </el-submenu>
    <el-submenu index="2">
      <template slot="title"><i title="文本" class="fa fa-header"></i></template>
      <el-menu-item index="2-1">文本框</el-menu-item>
      <el-menu-item index="2-2">跑马灯</el-menu-item>
      <el-menu-item index="2-3">超链接</el-menu-item>
      <el-menu-item index="2-4">实时时间</el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title"><i title="媒体" class="fa fa-image"></i></template>
      <el-menu-item index="3-1">图片框</el-menu-item>
      <el-menu-item index="3-2">轮播图</el-menu-item>
      <el-menu-item index="3-3">iframe</el-menu-item>
      <el-menu-item index="3-4">video</el-menu-item>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title"><i title="工具" class="fa fa-th-large"></i></template>
      <el-menu-item index="4-1">边框</el-menu-item>
      <el-menu-item index="4-2">装饰</el-menu-item>
    </el-submenu>
    <el-submenu index="5">
      <template slot="title"><i title="表格" class="fa fa-table"></i></template>
      <el-menu-item index="5-1">轮播表</el-menu-item>
      <el-menu-item index="5-2">排名轮播表</el-menu-item>
    </el-submenu>
    <el-menu-item index="6"><i title="导出图片" class="el-icon-camera"></i></el-menu-item>
    <el-menu-item index="7"><i title="预览" class="el-icon-view"></i></el-menu-item>
    <el-menu-item index="99"><i title="保存" class="fa fa-save"></i></el-menu-item>
    <el-menu-item index="100"><i title="返回" class="fa fa-arrow-left"></i></el-menu-item>
  </el-menu>
</template>

<script>
  import * as u from '@/util/util'

  var resources = require("./data/resources.json")
  export default {
    name: "screenMenu",
    computed: {
      //当前选中的值
      chooseComponent() {
        return this.$store.state.chooseComponent
      },
      //获取面板信息
      panelDom() {
        return this.$store.state.panelDom;
      },
    },
    data() {
      return {
        //资源对象
        resources: resources
      };
    },
    methods: {
      handleSelect(key) {
        switch (key) {
            case '7':   //预览
            this.$parent.preview()
            break;
          case '99':   //保存
            this.savePanelDom();
            break;
          case '100':   //返回
            this.$router.push("/bus/screen/myList");
            break;
          default:
            let component = this.resources[key]
            if (component == null) {
              this.$message.error("组件还在研发中请稍等！");
            } else {
              component.uuid = u.uuid();
              this.panelDom.component.push(u.copyBean(component));
              this.$store.commit("setChooseComponent", this.panelDom.component[this.panelDom.component.length - 1])
            }
            break;
        }
      },


      //保存当前面板信息
      savePanelDom() {
        u.post("/bus-screen/saveScreenJson", {
          id: this.$route.params.id,
          json: JSON.stringify(this.panelDom)
        }).then(res => {
          this.$message.success("保存成功！");
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .el-submenu__title, .el-menu-item {
    i {
      font-size: 18px;
      color: white;
    }
  }
</style>
